<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Facebook Post Work Skin by amerikate</title>
<style type="text/css">

body { background-color: #ffffff; }
.CI {
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
.center   {text-align: center;}
.cover    {text-align: center;}
.full     {width: 100%; }
.quarter  {width: 25%; }
.smcap    {font-variant: small-caps;}
.u        {text-decoration: underline;}
.bold     {font-weight: bold;}
</style>
</head>
<body>
<h1><a href="https://archiveofourown.org/works/29665323">Facebook Post Work Skin</a> by <a class='authorlink' href='https://archiveofourown.org/users/amerikate/pseuds/amerikate'>amerikate</a></h1>

<table class="full">

<tr><td><b>Category:</b></td><td>No Fandom</td></tr>

<tr><td><b>Genre:</b></td><td>Facebook, Fanwork Research &amp; Reference Guides, Work Skin</td></tr>

<tr><td><b>Language:</b></td><td>English</td></tr>

<tr><td><b>Status:</b></td><td>Completed</td></tr>

<tr><td><b>Published:</b></td><td>2021-02-24</td></tr>

<tr><td><b>Updated:</b></td><td>2021-02-24</td></tr>

<tr><td><b>Packaged:</b></td><td>2021-05-15 23:13:44</td></tr>

<tr><td><b>Rating:</b></td><td>Not Rated</td></tr>

<tr><td><b>Warnings:</b></td><td>No Archive Warnings Apply</td></tr>

<tr><td><b>Chapters:</b></td><td>1</td></tr>

<tr><td><b>Words:</b></td><td>770</td></tr>

<tr><td><b>Publisher:</b></td><td>archiveofourown.org</td></tr>

<tr><td><b>Story URL:</b></td><td>https://archiveofourown.org/works/29665323</td></tr>

<tr><td><b>Author URL:</b></td><td>https://archiveofourown.org/users/amerikate/pseuds/amerikate</td></tr>

<tr><td><b>Summary:</b></td><td><div class="userstuff">
              <p>How to get minimalist-looking Facebook posts and comments into your fic!</p>
            </div></td></tr>

<tr><td><b>Comments:</b></td><td>4</td></tr>

<tr><td><b>Kudos:</b></td><td>12</td></tr>

</table>

<a name="section0001"><h2>Facebook Post Work Skin</h2></a>
<div class="story"><div class="userstuff module">
    
    <p>I made this skin for one of my fics on my main AO3 account, so the resulting design is pretty simple. However, I thought I'd put it here in case anyone else is just dying to write Facebook posts into their own works—please feel free to leave a comment if you have any questions or want to add anything to it! ^___^</p><h4>WHAT IT SHOULD LOOK LIKE</h4>
<p></p><div class="fb">
  <p><b>Hanyang University Confessions</b><br/>
<span class="fb-hashtag">#5245</span><br/>
does anyone know if 1st year kang XX from the medicine department has a girlfriend? he’s super cute...</p>
  <p>
    <span class="fb-grey">😲👍❤️ Park Jiwoo and 42 others</span>
  </p>
  <p class="fb-comment"><span class="fb-name"><b>Kim Jinah</b></span><br/>
lol why is everyone going crazy in the comments??? what does he look like</p>
  <p class="fb-reply"><span class="fb-name"><b>Park Jiwoo</b></span><br/>
<b>Jinah</b> <a href="https://64.media.tumblr.com/2a8ce51c6e93083c20bdff50cc62e216/9d56a5b168dbae5b-84/s1280x1920/b935473de94a78e365f2e654bedc4aae7376397a.png">https://www.instagram.com/kangmini.02/</a></p>
  <p class="fb-reply"><span class="fb-name"><b>Kim Jinah</b></span><br/>
<b>Jiwoo</b> .......i'd like to request a refund on behalf of the computing department</p>
  <p class="fb-comment"><span class="fb-name"><b>Ham Yujin</b></span><br/>
i have morning bio lecture with him ㅠㅠ seriously how can someone look that good at 8am...</p>
  <p class="fb-grey">
    <b>View more comments (21 of 50)</b>
  </p>
</div><br/><h4>HOW TO USE WORK SKINS</h4>
<p>If you don't know how to use work skins, refer to this handy-dandy <a href="https://archiveofourown.org/admin_posts/1370?show_comments=true">AO3 guide.</a> All you have to do is <b>create a new work skin, copy paste the CSS code on this page, and then apply it to whatever fic draft</b> you're working on.</p><h4>DESIGN NOTES</h4>
<p>This design is based on how Facebook currently looks on my desktop as of 2021. It isn't an exact match because I'm partial to designs that "integrate" into fics well and I wanted to achieve a balance between minimalism and exact replica (and also I was lazy), but it should do the job. Of course, if you have any CSS/HTML knowledge and would like to tweak this to your liking, do whatever you'd like! This skin should also still be presentable with Creator's Style off.</p><h4>REACTIONS</h4>
<p>Unfortunately the Facebook "care" emoji isn't really feasible with this design style (again, feel free to replace the emojis with images if you'd really like to! It was a personal design choice to just use default emojis), but you can emulate the rest easily. Emojis <i>shouldn't</i> be giving you trouble on AO3 anymore, so you should be able to just paste these in directly:</p>
<p></p><div class="center">
  <p>👍❤️🤣😲😡</p>
</div><h3>CODE</h3>
<p>You need both CSS and HTML to get this skin to work; the CSS can be pasted as-is and tweaked to your liking, while the HTML is your actual content. See below:</p><h4>CSS</h4>
<p>Again, this is the stuff that goes directly into your work skin. Just copy-paste and don't worry about it unless you want to make your own tweaks. The "comment" class refers to the main comments under a post, while the "reply" class refers to replies <i>to</i> the comments themselves.</p>
<p></p><div class="code">
  <pre>#workskin .fb {
  margin: auto;
  max-width: 500px;
  color: #050505;
  font-size: 14px;
  font-family: 'Helvetica', sans-serif;
  background-color: #fff;
  padding: 1px 20px;
  border-radius: 10px;
}

#workskin .fb a {
  color: #1876f2;
}

#workskin .fb-comment {
  border-radius: 20px;
  background-color: #f0f2f5;
  padding: 10px 15px;
}

#workskin .fb-reply {
  border-radius: 20px;
  background-color: #f0f2f5;
  margin-left: 40px;
  padding: 10px 15px;
}

#workskin .fb-name {
  font-size: 13px;
}

#workskin .fb-grey {
  color: #65676b;
}

#workskin .fb-hashtag {
  color: #1876f2;
}</pre>
</div><h4>HTML</h4><p>This is the stuff that goes into your actual "Work Text" section when you're posting fic. Make sure you're in the HTML tab and paste in this template. Then replace anything in brackets (including the brackets) like [Text] with your actual content! Also replace the emojis with whatever you'd like.</p>
<p></p><div class="code">
  <pre>&lt;div class="fb"&gt;&lt;p&gt;
    &lt;b&gt;[Facebook Name]&lt;/b&gt;&lt;br /&gt;
    [Facebook status text goes here] &lt;span class="fb-hashtag"&gt;[#hashtag]&lt;/span&gt;
&lt;/p&gt;

&lt;p&gt;
    &lt;span class="fb-grey"&gt;🤣😢❤️ [Name] and [10] others&lt;/span&gt;
&lt;/p&gt;

&lt;p class="fb-comment"&gt;
    &lt;span class="fb-name"&gt;&lt;b&gt;[Comment name]&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
    [Comment content]
&lt;/p&gt;

&lt;p class="fb-reply"&gt;
    &lt;span class="fb-name"&gt;&lt;b&gt;[Comment Reply name]&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
    [Reply text]
&lt;/p&gt;

&lt;p class="fb-reply"&gt;
    &lt;span class="fb-name"&gt;&lt;b&gt;[Comment Reply name]&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
    &lt;b&gt;[Name to @]&lt;/b&gt; &lt;a href="[Actual link]" rel="nofollow"&gt;[Link to be shown]&lt;/a&gt;
&lt;/p&gt;

&lt;p class="fb-reply"&gt;
    &lt;span class="fb-name"&gt;&lt;b&gt;[Comment Reply name]&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
    &lt;b&gt;[Optional name]&lt;/b&gt; [reply text]
&lt;/p&gt;

&lt;p class="fb-grey"&gt;
    &lt;b&gt;View more comments ([17] of [27])&lt;/b&gt;
&lt;/p&gt;&lt;/div&gt;</pre>
</div><hr/><p>This is all pretty simplified and minimalist, but I hope this helps! If I ever make a better emulation of the Facebook look that I feel is still templateable, I'll do my best to add another chapter or update the code here n___n</p>
<p><b>03/01/21 edit</b>: Added some code to support various site skins (styled white background that will only show up on site skins with differently colored background). Make sure your HTML code doesn't have extra br tags inside the div block so the styling doesn't look off!</p>
  </div></div>
</body>
</html>